Skip to main content

JSON – Structure of forms

version author

 

Basic Structure​

Body of the JSON file is an object with the following properties:

{
    "form_id": string,              // No standard/enforced format established yet
    "form_label": string,           // No max length yet (needs to be set in the frontend)
    "form_description?": string,    // No max length yet  (needs to be set in the frontend)
    "form_version": string,         // Regex: "^\d+\.\d+\.\d+$"
    "form":[                        // No maximum number of fields yet
        // Form fields
        // etc.
    ]
}
  • form_id is the unique identifier of the form
  • form_label is the title of the form
  • form_description is an optional description of the form
  • form_version is the version used of the form creator tool which generated the JSON file
  • form is an array of form fields

 

Implemented (Web App)Implemented (Mobile)
form_id form_id
form_label form_label
form_description form_description
form_version form_version
form form

 

Form Fields​

Notice element​

A notice element is used to display a message to the user. It can be used to display information, warnings, etc.

{
    "field_type": "notice",       // Fixed value
    "field_label": string,        // No max length yet (needs to be set in the frontend)
    "field_size?": string,        // "small" | "medium" | "large" ; Default handled by the mobile app
    "field_color?": string,       // Regex: "^#[0-9a-fA-F]{6}$" ; Default handled by the mobile app
}
  • field_type is the type of the field
  • field_label is the message to be displayed
  • field_size is the size of the notice element
  • field_color is the color of the notice element

 

Implemented (Web App)Implemented (Mobile)
field_type field_type
field_label field_label
field_size field_size
field_color field_color

 

Section element​

A section element is used to group form fields together. It can be used to separate different parts of the form.

{
    "field_type": "section",
    "field_label": string,        // No max length yet (needs to be set in the frontend)
    "field_key": string,          // No max length yet (needs to be set in the frontend)
    "field_required?": boolean,   // true | false ; Default: true
    "field_repeat?": boolean,   // true | false ; Default: false
    "field_max": integer,   // Default: 0"
    "field_min": integer,   // Default: 0"
}
  • field_type is the type of the field
  • field_label is the title of the section
  • field_key is the key of the field (used to identify the field in the database)
  • field_required is a boolean value indicating if the section is required it's display by default. If not required section can be add by user.
  • field_repeatis a boolean value indicating if the section can be repeat by the user in mobile app
  • field_max is a boolean value indicating the maximun that section can be repeat
  • field_min is a boolean value indicating the minimum that section can be repeat

 

Implemented (Web App)Implemented (Mobile)
field_type field_type
field_label field_label
field_key field_key
field_required field_required
field_repeat field_repeat
field_max field_max
field_min field_min

 

Select element​

A select element is used to present a list of options to the user. The user can select one of the options.

{
    "field_type": "select",       // Fixed value
    "field_key": string,          // No max length yet (needs to be set in the frontend)
    "field_label": string,        // No max length yet (needs to be set in the frontend)
    "field_required?": boolean,   // true | false ; Default: false
    "field_link?": string,        // Foreign key of "field_key"
    "select_default?": integer,   // Index of the default option ; Default: 0
    "select_min?": integer,       // Default: 1
    "select_max?": integer,       // Default: 1
    "select_options": [
        {
            "label": string       // No max length yet ; Ex: "Option 1"
        },
        {
            "label": string       // No max length yet ; Ex: "Option 2"
        }
        {
            ... // etc.
        }
    ]
}
  • field_type is the type of the field
  • field_key is the key of the field (used to identify the field in the database)
  • field_label is the title of the select element
  • field_required is a boolean value indicating if the field is required
  • field_link is the string that reference to a field_key. Used for link this field to an other.
  • select_default is the index of the default option
  • select_min is the minimum number of options that can be selected
  • select_max is the maximum number of options that can be selected
  • select_options is an array of objects containing the options
    • label is the text of the option

 

Implemented (Web App)Implemented (Mobile)
field_type field_type
field_key field_key
field_label field_label
field_required field_required
field_link field_link
select_default select_default
select_min select_min
select_max select_max
select_multi select_multi
select_options select_options
label label

 

note

If the select_default is not defined, the first option should be selected by default.

Select using a Source​
{
    "field_type": "select",       // Fixed value
    "field_key": string,          // No max length yet (needs to be set in the frontend)
    "field_label": string,        // No max length yet (needs to be set in the frontend)
    "field_required?": boolean,   // true | false ; Default: false
    "field_link?": string,        // Foreign key of "field_key"
    "select_default?": integer,   // Index of the default option ; Default: 0
    "select_min?": integer,       // Default: 1
    "select_max?": integer,       // Default: 1
    "select_source": string,      // No max length yet (needs to be set in the frontend)
}
  • field_type is the type of the field
  • field_key is the key of the field (used to identify the field in the database)
  • field_label is the title of the select element
  • field_required is a boolean value indicating if the field is required
  • field_link is the string that reference to a field_key. Used for link this field to an other.
  • select_default is the index of the default option
  • select_min is the minimum number of options that can be selected
  • select_max is the maximum number of options that can be selected
  • select_source is the source of the options (refer to the Possible sources section)

 

Implemented (Web App)Implemented (Mobile)
field_type field_type
field_key field_key
field_label field_label
field_required field_required
field_link field_link
select_default select_default
select_min select_min
select_max select_max
select_source select_source

 

Possible sources​
  • select_source: "code_inventory": The options are taken from the database and shows every code in the inventory
  • select_source: "fauna": The options are taken from the database and shows every species in the fauna collection
  • select_source: "flora": The options are taken from the database and shows every species in the flora collection
  • select_source: "insects": The options are taken from the database and shows every species in the insects collection

 

Picture​

A picture element is used to select a picture in galerie or directly take a picture with the camera.

   {
     "field_type": "picturepicker",
     "field_key": string,
     "field_label": string,
     "field_required?": true
   }
  • field_type is the type of the field
  • field_key is the key of the field (used to identify the field in the database)
  • field_label is the title of the checkbox element
  • field_required is a boolean value indicating if the field is required

 

Implemented (Web App)Implemented (Mobile)
field_type field_type
field_key field_key
field_label field_label
field_required field_required

 

Recognition​

A button to send the picture to the API for specie's recognition

 {
   "field_type": "recognition",        // Fixed Value
   "field_saveScore": true,            // true | false ; Default: false
   "field_showScore": false,           // true | false ; Default: false
    "field_link?": string              // Foreign key of "field_key"
 },
  • field_type is the type of the field
  • field_saveScore is a boolean value indicating if score (accuracy) of IA will be save in database
  • field_showScore is a boolean value indication if score (accuracy) of IA will be show on the users.
  • field_link is the string that reference to a field_key contain a picture

 

Implemented (Web App)Implemented (Mobile)
field_type field_type
field_saveScore field_saveScore
field_showScore field_showScore
field_link field_link

 

Checkbox​

A checkbox element is used to present a choice true/false to the user.

{
    "field_type": "checkbox",         // Fixed value
    "field_key": string,              // No max length yet (needs to be set in the frontend)
    "field_label": string,            // No max length yet (needs to be set in the frontend)
    "field_required?": boolean,       // true | false ; Default: false
    "checkbox_default?": boolean,     // true | false ; Default: false
}
  • field_type is the type of the field
  • field_key is the key of the field (used to identify the field in the database)
  • field_label is the title of the checkbox element
  • field_required is a boolean value indicating if the field is required
  • checkbox_default is the default value of the checkbox

 

Implemented (Web App)Implemented (Mobile)
field_type field_type
field_key field_key
field_label field_label
field_required field_required
checkbox_default checkbox_default

 

Date input​

{
    "field_type": "datepicker",       // Fixed value
    "field_key": string,              // No max length yet (needs to be set in the frontend)
    "field_label": string,            // No max length yet (needs to be set in the frontend)
    "field_required?": boolean,       // true | false ; Default: false
    "input_default?": string,         // Regex: "^\d{4}-\d{2}-\d{2}$" ; Default: Today as "YYYY-MM-DD"
    "input_min?": string,             // Regex: "^\d{4}-\d{2}-\d{2}$" ; No min date yet
    "input_max?": string              // Regex: "^\d{4}-\d{2}-\d{2}$" ; No max date yet
}
  • field_type is the type of the field
  • field_key is the key of the field (used to identify the field in the database)
  • field_label is the title of the input element
  • field_hint is the optional hint text that provides additional guidance to the user about the field's content
  • field_required is a boolean value indicating if the field is required
  • input_type is the type of the input
  • input_default is the default value of the input
  • input_min is the minimum date of the input
  • input_max is the maximum date of the input

 

Implemented (Web App)Implemented (Mobile)
field_type field_type
field_key field_key
field_label field_label
field_hint field_hint
field_required field_required
input_default input_default
input_min input_min
input_max input_max
note

Default value of the date input should be the current date.

 

Time input​

{
    "field_type": "timepicker",       // Fixed value
    "field_key": string,              // No max length yet (needs to be set in the frontend)
    "field_label": string,            // No max length yet (needs to be set in the frontend)
    "field_hint": string,             // No max length yet
    "field_required?": boolean,       // true | false ; Default: false
    "input_default?": string,         // Regex: "^\d{2}:\d{2}$" ; Default: Current time as "HH:MM"
    "input_min?": string,             // Regex: "^\d{2}:\d{2}$" ; No min time yet
    "input_max?": string              // Regex: "^\d{2}:\d{2}$" ; No max time yet
}
  • field_type is the type of the field
  • field_key is the key of the field (used to identify the field in the database)
  • field_label is the title of the input element
  • field_hint is the optional hint text that provides additional guidance to the user about the field's content
  • field_required is a boolean value indicating if the field is required
  • input_type is the type of the input
  • input_default is the default value of the input
  • input_min is the minimum time of the input
  • input_max is the maximum time of the input

 

 

Datetime input​

{
    "field_type": "datetimepicker",   // Fixed value
    "field_key": string,              // No max length yet (needs to be set in the frontend)
    "field_label": string,            // No max length yet (needs to be set in the frontend)
    "field_hint": string,             // No max length yet (needs to be set in the frontend)
    "field_required?": boolean,       // true | false ; Default: false
    "input_default?": string,         // Regex: "^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$" ; Default: Current time as "YYYY-MM-DDTHH:MM"
    "input_min?": string,             // Regex: "^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$" ; No min datetime yet
    "input_max?": string              // Regex: "^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$" ; No max datetime yet
}
  • field_type is the type of the field
  • field_key is the key of the field (used to identify the field in the database)
  • field_label is the title of the input element
  • field_hint is the optional hint text that provides additional guidance to the user about the field's content
  • field_required is a boolean value indicating if the field is required
  • input_default is the default value of the input
  • input_min is the minimum datetime of the input
  • input_max is the maximum datetime of the input

 

Implemented (Web App)Implemented (Mobile)
field_type field_type
field_key field_key
field_label field_label
field_hint field_hint
field_required field_required
input_default input_default
input_min input_min
input_max input_max

 

Input​

An input element is used to collect text data from the user. It can be of different types: text, integer, decimal, date, time, datetime, email.

 

Text input​
{
    "field_type": "input",            // Fixed value
    "field_key": string,              // No max length yet (needs to be set in the frontend)
    "field_label": string,            // No max length yet (needs to be set in the frontend)
    "field_hint": string,             // No max length yet (needs to be set in the frontend)
    "field_required?": boolean,       // true | false ; Default: false
    "input_type": "text",             // Fixed value
    "input_default?": string,         // No max length yet ; Default: ""
    "input_min?": integer,            // No max length yet ; No min length yet
    "input_max?": integer,            // No max length yet ; No max length yet
}
  • field_type is the type of the field
  • field_key is the key of the field (used to identify the field in the database)
  • field_label is the title of the input element
  • field_hint is the optional hint text that provides additional guidance to the user about the field's content
  • field_required is a boolean value indicating if the field is required
  • input_type is the type of the input
  • input_default is the default value of the input
  • input_min is the minimum length of the input
  • input_max is the maximum length of the input

 

Implemented (Web App)Implemented (Mobile)
field_type field_type
field_key field_key
field_label field_label
field_hint field_hint
field_required field_required
input_type input_type
input_default input_default
input_min input_min
input_max input_max

 

Integer input​
{
    "field_type": "input",            // Fixed value
    "field_key": string,              // No max length yet (needs to be set in the frontend)
    "field_label": string,            // No max length yet (needs to be set in the frontend)
    "field_hint": string,             // No max length yet (needs to be set in the frontend)
    "field_required?": boolean,       // true | false ; Default: false
    "input_type": "integer",          // Fixed value
    "input_default?": integer,        // No max length yet ; Default: 0
    "input_min?": integer,            // No max length yet ; No min length yet
    "input_max?": integer,            // No max length yet ; No max length yet
}
  • field_type is the type of the field
  • field_key is the key of the field (used to identify the field in the database)
  • field_label is the title of the input element
  • field_hint is the optional hint text that provides additional guidance to the user about the field's content
  • field_required is a boolean value indicating if the field is required
  • input_type is the type of the input
  • input_default is the default value of the input
  • input_min is the minimum value of the input
  • input_max is the maximum value of the input

 

Implemented (Web App)Implemented (Mobile)
field_type field_type
field_key field_key
field_label field_label
field_hint field_hint
field_required field_required
input_type input_type
input_default input_default
input_min input_min
input_max input_max

 

Decimal input​
{
    "field_type": "input",            // Fixed value
    "field_key": string,              // No max length yet (needs to be set in the frontend)
    "field_label": string,            // No max length yet (needs to be set in the frontend)
    "field_hint": string,             // No max length yet (needs to be set in the frontend)
    "field_required?": boolean,       // true | false ; Default: false
    "input_type": "decimal",          // Fixed value
    "input_default?": decimal,        // No max length yet ; Default: 0.0
    "input_min?": decimal,            // No max length yet ; No min length yet
    "input_max?": decimal,            // No max length yet ; No max length yet
}
  • field_type is the type of the field
  • field_key is the key of the field (used to identify the field in the database)
  • field_label is the title of the input element
  • field_hint is the optional hint text that provides additional guidance to the user about the field's contents
  • field_required is a boolean value indicating if the field is required
  • input_type is the type of the input
  • input_default is the default value of the input
  • input_min is the minimum value of the input
  • input_max is the maximum value of the input

 

Implemented (Web App)Implemented (Mobile)
field_type field_type
field_key field_key
field_label field_label
field_hint field_hint
field_required field_required
input_type input_type
input_default input_default
input_min input_min
input_max input_max

 

Email input​
{
    "field_type": "input",            // Fixed value
    "field_key": string,              // No max length yet (needs to be set in the frontend)
    "field_label": string,            // No max length yet (needs to be set in the frontend)
    "field_hint": string,             // No max length yet (needs to be set in the frontend)
    "field_required?": boolean,       // true | false ; Default: false
    "input_type": "email",            // Fixed value
    "input_default?": string,         // No max length yet ; Regex: ? ; Default: ""
    "input_min?": integer,            // No max length yet ; No min length yet
    "input_max?": integer,            // No max length yet ; No max length yet
    "email_domain?": string,          // No max length yet ; Regex: ? ; Default: "" ; Example: "example.com"
}
  • field_type is the type of the field
  • field_key is the key of the field (used to identify the field in the database)
  • field_label is the title of the input element
  • field_hint is the optional hint text that provides additional guidance to the user about the field's content
  • field_required is a boolean value indicating if the field is required
  • input_type is the type of the input
  • input_default is the default value of the input
  • input_min is the minimum length of the input
  • input_max is the maximum length of the input
  • email_domain is the optional imposed domain of the email (part after the '@' character)

 

Implemented (Web App)Implemented (Mobile)
field_type field_type
field_key field_key
field_label field_label
field_hint field_hint
field_required field_required
input_type input_type
input_default input_default
input_min input_min
input_max input_max
email_domain email_domain

 

Notes input​
   {
     "field_type": "input",            // Fixed value
     "field_key": string,              // No max length yet (needs to be set in the frontend)
     "field_label": string,            // No max length yet (needs to be set in the frontend)
     "field_hint": string,             // No max length yet (needs to be set in the frontend)
     "field_required?": boolean,        // true | false ; Default: false
     "input_type": "notes",            // Fixed value
     "input_default?": string,         // No max length yet ; Regex: ? ; Default: ""
     "input_min?": integer,            // No max length yet ; No min length yet
     "input_max?": integer,            // No max length yet ; No max length yet
   },
  • field_type is the type of the field
  • field_key is the key of the field (used to identify the field in the database)
  • field_label is the title of the input element
  • field_hint is the optional hint text that provides additional guidance to the user about the field's content
  • field_required is a boolean value indicating if the field is required
  • input_type is the type of the input
  • input_default is the default value of the input
  • input_min is the minimum length of the input
  • input_max is the maximum length of the input

 

Implemented (Web App)Implemented (Mobile)
field_type field_type
field_key field_key
field_label field_label
field_hint field_hint
field_required field_required
input_type input_type
input_default input_default
input_min input_min
input_max input_max

 

Examples​

Example 1 - Basic Form​

{
  "form_id": "example_form_1",
  "form_label": "Example Form 1",
  "form_version": "0.1.0",
  "form": [
    {
      "field_type": "notice",
      "field_label": "This is an example form"
    },
    {
      "field_type": "section",
      "field_label": "Section 1"
    },
    {
      "field_type": "select",
      "field_label": "No default option should be selected",
      "field_required": true,
      "select_default": 0,
      "select_options": [
        {
          "id": 1,
          "label": "Option 1"
        },
        {
          "id": 2,
          "label": "Option 2"
        }
      ]
    },
    {
      "field_type": "select",
      "field_label": "The second option should be Option 2",
      "field_required": true,
      "select_default": 2,
      "select_options": [
        {
          "id": 1,
          "label": "Option 1"
        },
        {
          "id": 2,
          "label": "Option 2"
        }
      ]
    },
    {
      "field_type": "checkbox",
      "field_label": "This checkbox should be checked by default",
      "field_required": true,
      "checkbox_default": true
    },
    {
      "field_type": "input",
      "field_label": "This text input should be required",
      "field_hint": "This text input",
      "field_required": true,
      "input_type": "text",
      "input_default": "",
      "input_min": 1,
      "input_max": 100
    },
    {
      "field_type": "input",
      "field_label": "This integer input should have a default value of 12",
      "field_hint": "This text integer",
      "field_required": true,
      "input_type": "integer",
      "input_default": 12,
      "input_min": 0,
      "input_max": 60
    }
  ]
}

Example 2 - Complete Form​

TODO

Example 3 - Form with errors​

TODO

Exemple 4 - Complete Temporary Form (Maxence)​

{
  "form_id": "example_form_1",
  "form_label": "Example Form 1",
  "form_version": "0.1.0",
  "form": [
    {
      "field_type": "input",
      "field_label": "This text",
      "field_hint": "text hint",
      "field_required": true,
      "input_type": "text",
      "input_default": "",
      "input_min": 1,
      "input_max": 100
    },
    {
      "field_type": "input",
      "field_label": "This integer",
      "field_hint": "int hint",
      "field_required": true,
      "input_type": "integer"
    },
    {
      "field_type": "input",
      "field_label": "This decimal",
      "field_hint": "decimal hint",
      "field_required": true,
      "input_type": "decimal"
    },
    {
      "field_type": "input",
      "field_label": "this email",
      "field_hint": "email hint",
      "field_required": true,
      "input_type": "email"
    },
    {
      "field_type": "datepicker",
      "field_label": "date",
      "field_hint": "entrer une date",
      "field_required": true
    },
    {
      "field_type": "timepicker",
      "field_label": "time label",
      "field_hint": "entrer le temps",
      "field_required": true
    },
    {
      "field_type": "datetimepicker",
      "field_label": "datetime label",
      "field_hint": "entrer la date et le temps",
      "field_required": true
    },
    {
      "field_type": "select",
      "field_label": "choisir un fruit",
      "field_required": true,
      "max_choices": true,
      "select_options": [
        {
          "id": 1,
          "label": "poire"
        },
        {
          "id": 2,
          "label": "pomme"
        },
        {
          "id": 3,
          "label": "banane"
        }
      ]
    },
    {
      "field_type": "select",
      "field_label": "choisir un fruit",
      "field_required": true,
      "input_multi": false,
      "select_options": [
        {
          "id": 1,
          "label": "poire"
        },
        {
          "id": 2,
          "label": "pomme"
        },
        {
          "id": 3,
          "label": "banane"
        }
      ]
    },
    {
      "field_type": "checkbox",
      "field_label": "checkboxlabel",
      "field_required": true
    }
  ]
}